page {
  height: 100%;
  display: flex;

  .answer-detail {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 70rpx 0 0 0;
    background-color: #dbdbdb;

    .header { 
      padding-left: 50rpx;
    }

    .detail {
      flex: 1;
      margin-top: 140rpx;
      display: flex;
      flex-direction: column;
      .title {
        display: block;
        font-size: 60rpx;
        margin-bottom: 80rpx;
        padding-left: 50rpx;
        font-weight: bold;
      }
      .content-view {

        background-color: #fff;
        flex: 1;
        display: flex;
        border-radius: 10rpx;
      }
      .content-box {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 50rpx;
        justify-content: space-between;
        background: url(../../../../assets/images/test-right.svg) no-repeat bottom center;
        &.error {
          background: url(../../../../assets/images/test-error.svg) no-repeat bottom center;

        }
      }
      .content {
        display: flex;
        flex-direction: column;
        .grade-box {
          text-align: center;
          margin: 20rpx 0;
          @icon-size: 70rpx;
          .icon-coins {
            height: @icon-size;
            width: @icon-size;
            display: inline-block;
            vertical-align: middle;
            background: url("../../../../assets/images/conis.svg");
            background-size: cover;
            font-weight: normal;
          }
          @purple100: #6c63ff;

          .answer-grade {
            text-align: right;
            font-size: 40rpx;
            font-weight: bold;
            color: @purple100;
            display: inline-block;
            vertical-align: middle;
            margin-left: 10rpx;
            // margin-bottom: 20rpx;
          }
        }
        .answer-result {
          text-align: center;
          font-size: 50rpx;
          font-weight: bold;
          margin-bottom: 40rpx;
        }

        .right-answer {
          display: block;
          font-size: 30rpx;
          background-color: #91c788;
          color: #fff;
          padding: 20rpx 40rpx;
          border-radius: 30rpx;
          margin-bottom: 20rpx;
        }

        .answer-explain {
          font-size: 30rpx;
          margin-bottom: 40rpx;
        }

        .image {
          position: relative;
          left: 50%;
          transform: translateX(-50%);
          width: 300rpx;
          height: 300rpx;
          background-color: #c4c4c4;
          border-radius: 30rpx;
        }
      }
    }

    .next,
    .finish {
      margin: 0;
      border-radius: 30rpx;
      font-size: 35px;
    }
  }
}
